{% extends 'base.html' %}
{% load static %}

{% block title %}Predictions - NEPSE Stock Forecasting{% endblock %}

{% block content %}
{% csrf_token %}
<div class="px-4 py-6 sm:px-0">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Stock Price Predictions</h1>
        <p class="mt-2 text-gray-600">Generate and view stock price predictions using ML models</p>
    </div>

    <!-- Prediction Controls -->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Generate New Predictions</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
            <div>
                <label for="predictionStock" class="block text-sm font-medium text-gray-700">Stock Symbol</label>
                <select id="predictionStock" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Select a stock...</option>
                    {% for stock in stocks %}
                        <option value="{{ stock.symbol }}">{{ stock.symbol }} - {{ stock.company_name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label for="predictionModel" class="block text-sm font-medium text-gray-700">Model Type</label>
                <select id="predictionModel" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="LSTM">LSTM Neural Network</option>
                    <option value="SVR">Support Vector Regression</option>
                </select>
            </div>
            
            <div>
                <label for="predictionAsOf" class="block text-sm font-medium text-gray-700">As-of Date (Optional)</label>
                <input id="predictionAsOf" type="date" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="YYYY-MM-DD" />
                <p class="text-xs text-gray-500 mt-1">Generate predictions as if this date were the latest (optional)</p>
                <p id="asOfDisplay" class="text-xs text-gray-600 mt-1">As-of: <span id="asOfValue">None</span></p>
            </div>
            
            <div>
                <label for="predictionDays" class="block text-sm font-medium text-gray-700">Prediction Days</label>
                <select id="predictionDays" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="1">1 day</option>
                    <option value="3">3 days</option>
                    <option value="5" selected>5 days</option>
                    <option value="7">7 days</option>
                    <option value="14">14 days</option>
                    <option value="30">30 days</option>
                </select>
            </div>
            
            <div class="flex items-end">
                <button id="generatePredictions" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-magic mr-2"></i>
                    Generate Predictions
                </button>
            </div>
        </div>
    </div>

    <!-- Prediction Results -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Prediction Chart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Prediction Chart</h3>
            <div class="relative">
                <canvas id="predictionChart" width="400" height="300"></canvas>
                <div id="predictionPlaceholder" class="flex items-center justify-center h-64 text-gray-500">
                    Generate predictions to view the chart
                </div>
            </div>
        </div>

        <!-- Prediction Table -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Prediction Values</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Predicted Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Change</th>
                        </tr>
                    </thead>
                    <tbody id="predictionTable" class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td colspan="3" class="px-6 py-4 text-center text-gray-500">No predictions generated yet</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Historical Predictions -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">Historical Predictions</h3>
            <div class="flex space-x-2">
                            <input id="historyStartDate" type="date" class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
                            <input id="historyEndDate" type="date" class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
                <select id="historyStock" class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All stocks</option>
                    {% for stock in stocks %}
                        <option value="{{ stock.symbol }}">{{ stock.symbol }}</option>
                    {% endfor %}
                </select>
                <select id="historyModel" class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All models</option>
                    <option value="LSTM">LSTM</option>
                    <option value="SVR">SVR</option>
                </select>
                <button id="loadHistory" class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700">
                    Load
                </button>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prediction Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Predicted Price</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual Price</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Accuracy</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                    </tr>
                </thead>
                <tbody id="historyTable" class="bg-white divide-y divide-gray-200">
                    <!-- Will be populated by JavaScript -->
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Pre-fill history date range (last 30 days) so users see recent historical predictions on load
    const startInput = document.getElementById('historyStartDate');
    const endInput = document.getElementById('historyEndDate');
    if (startInput && endInput) {
        const today = new Date();
        const endStr = today.toISOString().split('T')[0];
        const startDate = new Date();
        startDate.setDate(today.getDate() - 30);
        const startStr = startDate.toISOString().split('T')[0];
        endInput.value = endStr;
        startInput.value = startStr;
    }
    loadHistoricalPredictions();
    
    // Event listeners
    document.getElementById('generatePredictions').addEventListener('click', generatePredictions);
    document.getElementById('loadHistory').addEventListener('click', loadHistoricalPredictions);
    // Update asOf display on change
    const asOfInput = document.getElementById('predictionAsOf');
    if (asOfInput) {
        asOfInput.addEventListener('change', () => {
            const val = asOfInput.value;
            document.getElementById('asOfValue').textContent = val ? val : 'None';
        });
    }
});

let predictionChart = null;

async function generatePredictions() {
    const stock = document.getElementById('predictionStock').value;
    const model = document.getElementById('predictionModel').value;
    const days = document.getElementById('predictionDays').value;
    
    if (!stock) {
        showNotification('Please select a stock', 'warning');
        return;
    }
    
    showLoading();
    
    // Get CSRF token from cookie, DOM, or meta tag
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken') || 
                     document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
                     document.querySelector('meta[name=csrf-token]')?.getAttribute('content');
    
    console.log('CSRF Token:', csrftoken); // Debug log
    
    if (!csrftoken) {
        showNotification('CSRF token not found', 'error');
        hideLoading();
        return;
    }
    
    try {
        const asOfVal = document.getElementById('predictionAsOf').value;
        // If user selected future date, warn and abort
        if (asOfVal && asOfVal.trim() !== '') {
            const selDate = new Date(asOfVal);
            const today = new Date();
            today.setHours(0,0,0,0);
            selDate.setHours(0,0,0,0);
            if (selDate > today) {
                showNotification('As-of date cannot be in the future', 'warning');
                hideLoading();
                return; // abort request
            }
        }

        const response = await fetch('/api/predict/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken,
            },
            body: (function() {
                const payload = {
                    stock_symbol: stock,
                    model_type: model,
                    n_days: parseInt(days)
                };
                if (asOfVal && asOfVal.trim() !== '') {
                    payload.as_of = asOfVal.trim();
                }
                console.log('Prediction request body:', payload);
                return JSON.stringify(payload);
            })()
        });
        
        const result = await response.json();
        
        if (response.ok) {
            showNotification('Predictions generated successfully', 'success');
            // Attach top-level as_of to the predictions object for display functions
            if (result.as_of && result.predictions) {
                result.predictions.as_of = result.as_of;
            }
            displayPredictions(result.predictions);
        } else {
            showNotification(result.error || 'Failed to generate predictions', 'error');
        }
        
    } catch (error) {
        console.error('Error generating predictions:', error);
        showNotification('Error generating predictions', 'error');
    } finally {
        hideLoading();
    }
}

function displayPredictions(predictionData) {
    // Hide placeholder and show chart
    document.getElementById('predictionPlaceholder').style.display = 'none';
    document.getElementById('predictionChart').style.display = 'block';
    
    // Update chart
    createPredictionChart(predictionData);
    
    // Update table
    updatePredictionTable(predictionData);
}

function createPredictionChart(data) {
    const ctx = document.getElementById('predictionChart').getContext('2d');
    
    if (predictionChart) {
        predictionChart.destroy();
    }
    
    predictionChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.prediction_dates,
            datasets: [{
                label: 'Predicted Prices',
                data: data.predictions,
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: 'Price (Rs.)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: `Stock Price Predictions - ${data.stock_symbol} (${data.model_type})` + (data.as_of ? ` (as of ${data.as_of})` : '')
                }
            }
        }
    });
}

function updatePredictionTable(data) {
    const tableBody = document.getElementById('predictionTable');
    tableBody.innerHTML = '';
    
    if (data.predictions && data.predictions.length > 0) {
        data.predictions.forEach((price, index) => {
            const date = data.prediction_dates[index];
            const previousPrice = index > 0 ? data.predictions[index - 1] : price;
            const change = price - previousPrice;
            const changePercent = ((change / previousPrice) * 100).toFixed(2);
            
            const row = tableBody.insertRow();
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${date}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(price)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm ${change >= 0 ? 'text-green-600' : 'text-red-600'}">
                    ${change >= 0 ? '+' : ''}${formatCurrency(change)} (${changePercent}%)
                </td>
            `;
        });
    }
}

async function loadHistoricalPredictions() {
    const stock = document.getElementById('historyStock').value;
    const model = document.getElementById('historyModel').value;
    const startDate = document.getElementById('historyStartDate').value;
    const endDate = document.getElementById('historyEndDate').value;
    
    let url = '/api/predictions/';
    const params = new URLSearchParams();
    
    if (stock) params.append('stock', stock);
    if (model) params.append('model_type', model);
    if (startDate && startDate.trim() !== '') params.append('start_date', startDate);
    if (endDate && endDate.trim() !== '') params.append('end_date', endDate);
    
    if (params.toString()) {
        url += '?' + params.toString();
    }
    
    try {
        const response = await fetch(url);
        const data = await response.json();

        const tableBody = document.getElementById('historyTable');
        tableBody.innerHTML = '';

        // Support both paginated {results: []} and raw array responses
        const predictionsList = Array.isArray(data) ? data : (data.results || []);
        if (predictionsList && predictionsList.length > 0) {
            predictionsList.forEach(prediction => {
                const accuracy = prediction.accuracy ? `${formatPercent(prediction.accuracy)}` : 'N/A';
                const actualPrice = prediction.actual_price ? formatCurrency(prediction.actual_price) : 'N/A';
                
                const row = tableBody.insertRow();
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${prediction.stock_symbol}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${prediction.model_type}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${prediction.prediction_date}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(prediction.predicted_price)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${actualPrice}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${prediction.accuracy > 80 ? 'text-green-600' : prediction.accuracy > 60 ? 'text-yellow-600' : 'text-red-600'}">${accuracy}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(prediction.created_at).toLocaleDateString()}</td>
                `;
            });
        } else {
            const row = tableBody.insertRow();
            row.innerHTML = '<td colspan="7" class="px-6 py-4 text-center text-gray-500">No historical predictions found</td>';
        }
        
    } catch (error) {
        console.error('Error loading historical predictions:', error);
        showNotification('Error loading historical predictions', 'error');
    }
}
</script>
{% endblock %}